<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>账户激活</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <link rel="stylesheet" href="/lib/bootstrap-3.3.7/css/bootstrap.min.css">
    <link href="/codeSeven-toastr/build/toastr.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/css/index/style.css">
    <link rel="stylesheet" href="/css/footer/footer.css">


    <script src="/lib/jquery.js" type="text/javascript" charset="utf-8"></script>
    <script src="/codeSeven-toastr/build/toastr.min.js"></script>
    <script src="/lib/bootstrap-3.3.7/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    <style type="text/css">
        body {
            background: url(/images/index/2019-02-02-7.jpg)  no-repeat;
            background-position: center 0;
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size: cover;
            -webkit-background-size: cover;
            font-size: 16px;
        }

        .panel_transparent_white_low {
            background: rgba(255, 255, 255, 0.8);
        }

        .panel_transparent_white_high {
            background: rgba(255, 255, 255, 0.4);
        }

        .panel_transparent_black_high {
            background: rgba(0, 0, 0, 0.2);
        }

    </style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <!-- 进行切换的按钮，data-target 对应responsive-navbar的ID -->
            <button class="navbar-toggle" data-toggle="collapse" data-target="#responsive-navbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="index.html" class="navbar-brand"><strong>五彩的文件管理系统</strong></a>
        </div>
        <!-- div.collapse.navbar-collapse -->
        <!-- 再定义一个id，叫做响应式导航栏 -->
    </div>
</nav>

    <div class="container">
        <div class="panel_transparent_white_high panel panel-default">
            <div class="panel-body">
                <span style="display: none;" id="uuid" th:text="${uuid}"></span>
                <p style="font-family: 华文新魏;font-size: 24px;">欢迎您，<span th:text="${email}"></span>；</p>
                <p style="font-family: 华文新魏;font-size: 18px;">以下输入您的用户昵称之后，点击激活按钮，就可以激活您的账户了</p>
            </div>
        </div>

        <div class="panel_transparent_white_low panel panel-default">
            <div class="panel-body">
                <p style="font-family: 华文新魏;font-size: 24px;" class="col-sm-3">我该怎么称呼您？</p>

                <div class="col-sm-4" style="font-family: 华文新魏;">
                    <input id="username" name="username" class="form-control" type="text" placeholder="请输入您的昵称或者姓名（昵称小于八个字符）" onkeyup="javascript:checkUsername(this);" onmousedown="javascript:checkUsername(this);">
                </div>

                <div class="col-sm-5" style="font-family: 华文新魏;font-size: 24px;">
                    <span style="float:left; font-family: Georgia;" id="usernameCheck">8</span>
                    <span>
                        字符。
                    </span>
                    <span style="font-size: 16px;">
                        (请勿输入空格)
                    </span>
                </div>
                <br><br><br><br><br><br><br><br><br><br>
                <div class="row" style="font-family: 华文新魏;font-size: 18px;">
                    <div class="col-sm-4">
                        <button id="confirm" type="button" class="btn btn-default btn-lg">确认激活</button>
                    </div>
                    <br>

                    <hr>
                    <div class="col-sm-12">
                        <p>能在这茫茫人海遇见你，是我莫大的荣幸 ... </p>

                    </div>
                </div>
            </div>
        </div>
    </div>

<!--采用container-fluid，使得整个页尾的宽度为100%，并设置它的背景色-->
<footer class="container-fluid foot-wrap">
    <!--采用container，使得页尾内容居中 -->
    <div class="container">
        <div class="row" id="footer">
            <div class="row-content col-md-3 col-xs-6">
                <!--友情链接-->
                <h3 class="footer_header">FRIENDSHIP</h3>
                <ul>
                    <li><a href="http://www.lstc.edu.cn/">乐山师范学院</a></li>
                    <li><a href="http://blog.mzywucai.club">五彩的博客</a></li>
                    <li><a href="https://blog.csdn.net/qq_36791569">五彩的CSDN</a></li>
                    <li><a href="https://gitee.com/mzy1998">五彩的码云</a></li>
                </ul>
            </div>
            <div class="row-content col-md-3 col-xs-6">
                <!--浏览-->
                <h3 class="footer_header">SITE</h3>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Mine</a></li>
                    <li><a href="#">About</a></li>
                </ul>
            </div>
            <div class="clearfix" id="footer-control"></div>
            <div class="row-content col-md-3 col-xs-6">
                <h3 class="footer_header">ABOUT</h3>
                <ul>
                    <li><a href="#">
                        People are inevitably born with self-pity. Only by staying awake at all times can we see where the value of truth lies.
                        <br>
                        Life is too long to do nothing, but too short to do something. These years, I have been reminding myself that one thing, do not move myself. Most people seem to work hard, but it's just a uploadResult of stupidity.
                    </a></li>
                </ul>
            </div>
            <div class="row-content col-md-3 col-xs-6">
                <h3 class="footer_header">CONCAT</h3>
                <ul>
                    <li><a href="mailto:mzywucai@foxmail.com"><span class="glyphicon glyphicon-envelope"></span>&ensp;<span>mzywucai@foxmail.com</span></a></li>
                </ul>
            </div>
        </div><!--/.row -->
    </div><!--/.container-->

    <p align="center" style="margin-top: 20px;color:#878B91;font-family: 华文新魏;">
        Copyright &copy;2019 TC-404 | PowerBy blog.mzywucai.club
    </p>

</footer>

    <script>
        // js初始化toastr。
        toastr.options.positionClass = 'toast-top-center';

        var $confirm = $("#confirm");
        // 此种方式不行，用写匿名函数的形式才行。
        // $confirm.hover(over(), out());

        /*
        function over() {
            console.log('in')

            $confirm.addClass("btn-primary");
            $confirm.removeClass("btn-default");

        }

        function out() {
            console.log('out')

            $confirm.addClass("btn-default");
            $confirm.removeClass("btn-primary");
        }
        */



        $confirm.hover(function() {

            $confirm.addClass("btn-primary");
            $confirm.removeClass("btn-default");

        }, function out() {

            $confirm.addClass("btn-default");
            $confirm.removeClass("btn-primary");
        });

        $confirm.click(function () {
            var UUID = $("#uuid").text();
            var username = $("#username").val();

            if (username == "") {
                toastr.warning('用户名不能为空');
                $("#username").focus();
                return;
            }


            $.ajax({
                type: "POST",
                url: '/api/activation',
                data:"uuid="+UUID+"&username="+username,
                success:
                    function (res) {
                        if (res.code == 0) {
                            toastr.success(res.msg);
                        } else if (res.code == 1) {
                            toastr.warning(res.msg);
                        } else {
                            toastr.error(res.msg);
                        }

                    },
                error:
                    function (res) {
                        toastr.error('系统接口异常，请稍后');
                    }
            });
        });

        var input_maxstrlen = 8;

        // 居然没得函数先后顺序？即使放到checkUsername后面也可以执行到？稳妥起见还是放在前面。
        function Q(s) { return document.getElementById(s); }

        function getStrleng(str, maxstrlen) {
            myLen = 0;
            i = 0;
            for (; (i < str.length) && (myLen <= maxstrlen * 2); i++) {
                /*if (str.charCodeAt(i) > 0 && str.charCodeAt(i) < 128)
                    myLen += 1;
                else*/
                myLen += 2;
            }
            return myLen;
        }

        function checkUsername(c) {
            len = input_maxstrlen;
            var str = c.value;
            myLen = getStrleng(str, len);
            var wck = Q("usernameCheck");

            if (myLen > len * 2) {
                c.value = str.replace(/^\s+|\s+$/g,"").substring(0, i + 1);
                wck.innerHTML = 0;
            }
            else {
                c.value = str.replace(/^\s+|\s+$/g,"");
                wck.innerHTML = Math.floor((len * 2 - myLen) / 2);
            }
        }



    </script>
</body>
</html>